/**********************************************全局样式*********************************************/
/* 全局样式 */
*{
    margin: 0;
    padding: 0;
}
/* 为了调节背景和内容的位置 */
body{
	height: 100vh;
	width: 100%;
	background-size: 500%;
	overflow: hidden;
}
/* 定位方式 */
*{
	position: relative;
}
/* 最底层背景 渐变色 */
.background_color{
	/* 1vh等于视口高度的1% */
	height: 100vh;
	width: 100%;
	background-image: linear-gradient(180deg,#0062ad,#0b1750);
	background-size: 100%;
	/* 毛玻璃 */
	-webkit-filter: blur(4px);
	-moz-filter: blur(4px);
	-ms-filter: blur(4px);
	-o-filter: blur(4px);
	filter: blur(0px);
}
/**********************************************全局样式*********************************************/

/**********************************************所有按钮*********************************************/
/*  所有按钮 > 登录按钮 active选择器无法更改行内式元素样式 */
.submit{
	top: 8%;
	background-color: #2d5ba3;
	width: 100%;
	height: 5vh;
	border: none;
	color: #FFF;
	font-size: 15px;
	font-weight: bold;
	border-radius: 5px;
}
/* 所有按钮 > 导航栏按钮 */
.host_btn, .user_btn, .panel_btn, .setup_btn, .checking_btn, .ok{
	width: 10%;
	height: 90%;
	float: left;
	/* 五个按钮占50%，每个按钮有左右两个边距，25%/5=5% = 居中 */
	margin: 0 0.5vw;
	/*background-image: linear-gradient(360deg,#3756ad,#6192ed);*/
	border-radius: 3px;
	text-align: center;
	line-height: 5vh;
	box-shadow:1px 1px 1px 1px #111;
	color: #FFF;
	font-family: fantasy;
	/* 禁止文字选中 */
	-webkit-user-select:none;
}
/* 所有按钮 > 导航栏按钮 ：按钮下效果 */
.host_btn:active, .user_btn:active, .panel_btn:active, .setup_btn:active, .checking_btn:active, .submit:active{
	opacity: 0.9;
	box-shadow:inset 2px 2px 2px 2px #000;
	border-radius: 3px;
	background-color: #0b306a;
}
/* 所有按钮 > 面板按钮 */
.host_left_all,.host_left_list,.host_left_addhost,.checking_left_link,.checking_left_test,.checking_left_port,.checking_left_device,.user_left_webUser,.user_left_deviceUser,.user_left_addUser{
	height: 6vh;
	width: 92%;
	background-color: #555f76;
	margin-left: 2%;
	margin-right: 2%;
	border-radius: 4px;
	text-align: center;
	line-height: 5vh;
	box-shadow:1px 1px 1px 1px #1a1c22;
	color: #fff;
	font-size: 14px;
	/* 禁止文字选中 */
	-webkit-user-select:none;
}
.host_left_all:active,.host_left_list:active,.host_left_addhost:active,.checking_left_link:active,.checking_left_test:active,.checking_left_port:active,.checking_left_device:active,.user_left_webUser:active,.user_left_deviceUser:active,.user_left_addUser:active{
	box-shadow:inset 2px 2px 2px 2px #000;
	background-color: #495164;
	font-size: 13.5px;
}
/* 所有按钮 > 删除按钮 */
.deleteBtn{
	background-color: #13c185;
}
.deleteBtn:hover{
	background-color: #ff2929;
}
.deleteBtn:active{
	background-color: #9f1c1c;
}
/**********************************************所有按钮*********************************************/

/**********************************************动   画*********************************************/
/* 登录页 > 输入框 */
@keyframes inputLogin {
	from{box-shadow: 1px 1px 1px 1px #000;}
	to{box-shadow: 0px 0px 8px #3062ac;}
}

/* 登录页 > 显示 逐渐出现 */
@keyframes login_loginView {
	from{opacity: 0;}
	to{	opacity: 1;}
}
/* 登录页 > 登录成功 逐渐消失 */
@keyframes login_loginOk {
	from{opacity: 1;}
	to{	opacity: 0;}
}
/* 登录页 > 登录失败 左右晃动 */
@keyframes login_loginNo{
	0% {left: 32.5%;}
	10% {left: 33%;}
	20% {left: 32.5%;}
	30% {left: 33%;}
	40% {left: 32.5%;}
	50% {left: 33%;}
	60% {left: 32.5%;}
	70% {left: 33%;}
	80% {left: 32.5%;}
	90%  {left: 33%;}
	100% {left: 32.5%;}
}
/* 主页 导航栏 >  登录成功 逐渐出现 */
@keyframes index_head_loginOk{
	from{opacity: 0;}
	to{opacity: 1;}
}
/* 主页 监控面板 >  登录成功 逐渐出现 */
@keyframes index_panel_loginOk{
	from{opacity: 0;}
	to{	opacity: 1;}
}
/* 主页面板切换效果 */
/* 离开动画 从中间到左边 */
@keyframes btn_switch_CenterGoLeftHide{
	from{left: 2.5%}
	to{left: -100%;}
}
/* 离场动画 从中间到右边 */
@keyframes btn_switch_CenterGoRightHide{
	from{left: 2.5%}
	to{left: 100%;}
}
/* 入场动画 从右边到中间 */
@keyframes btn_switch_RightGoCenterShow{
	from{left: 100%}
	to{left: 2.5%;}
}
/* 入场动画 从左边到中间 */
@keyframes btn_switch_LeftGoCenterShow{
	from{left: -100%}
	to{left: 2.5%;}
}
/* 原地刷新 逐渐显示 */
@keyframes flush{
	from{opacity: 0;}
	to{left:2.5%;opacity: 1;}
}
/**********************************************动   画*********************************************/

/**********************************************导航栏 *********************************************/
/* DIV 主页 导航栏 */
.head_div{
	width: 100%;
	height: 6%;
	background: linear-gradient(350deg,#213da9,#4c87e3 100%);
	border-radius: 0 0 4px 4px;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0.85;
	display: none;
}
/**********************************************导航栏 *********************************************/

/**********************************************登录页 *********************************************/
/* DIV 登录页 登录框 */
.login_div{
	width: 30%;
	height: 60%;
	background-color: #FFF;
	top: -90vh;
	left: 35.5vw;
	border-radius: 8px;
	display: none;
	/*animation:0.5s ease 0s 1 normal forwards running login_loginView;*/
}
.logo{
	width: 50%;
	height: 25%;
	left: 25%;
	border-radius: 100%;
}
.login_form{
	width: 80%;
	height: 60%;
	left: 10%;
	top: 4%;
}
.login_form form{
	width: 80%;
	height: 85%;
	left: 10%;
	top: 12.5%;
}
/* 输入框动效 */
#username:focus,#passwd:focus{
	animation: 0.5s ease 0s 1 normal forwards running inputLogin;
}
/**********************************************登录页 *********************************************/

/**********************************************内容面板*********************************************/
/* 内容面板 最外层 ：监控面板，设备管理，自动巡检，用户管理，系统设置 */
.panel,.host,.checking,.user,.setup{
	width: 95%;
	height: 91%;
	top:  8%;
	left: 2.5%;
	background-image: linear-gradient(351deg,#ccd8ff,#ffffff);
	border-radius: 4px;
	display: none;
	position: absolute;
}
/* 内容面板 第二层 > 左侧边栏： 设备管理，自动巡检，用户管理 */
.host_left,.checking_left,.user_left{
	width: 6%;
	height: 100%;
	background-color: #3c4353;
	border-radius: 4px;
}
/* 内容面板 第二层 > 左侧边栏 > 按钮： 设备总览/列表/添加、连通性/性能/端口/硬件检测、系统/设备/添加用户 */
.host_left_all,.user_left_webUser,.checking_left_link{
	top: 1%;
}
.host_left_list,.user_left_deviceUser,.checking_left_test{
	top:3%;
}
.host_left_addhost,.user_left_addUser,.checking_left_port{
	top:5%;
}
.checking_left_device{
	top: 7%;
}
/* 内容面板 第二层 > 右侧面板：设备管理，自动巡检，用户管理 */
.host_right,.user_right,.checking_right{
	width: 80%;
	height: 100%;
	top: -100%;
	left: 15%;
	border-radius: 4px;
}
/* 内容面板 第三层 > 右侧面板 > 功能面板 ：设备总览，连通性检测，系统用户 */
.host_right_all,.user_right_webUser,.checking_right_link,.host_right_list,.user_right_deviceUser,.checking_right_test,.host_right_addhost,.checking_right_port,.user_right_addUser,.checking_right_device{
	width: 100%;
	height: 100%;
	left: -8vw;
	display: block;
}
/**********************************************内容面板*********************************************/

/**********************************************所有表格*********************************************/
/*#F90,#9C27B0,#1196F3*/
.alltable_head
{
	background-color:#DDD;
	width:18%;
	height:6%;
	border-radius: 0 50px 0 0;
	top: 2%;
	left: 2%;
	box-shadow:5px 5px 5px 5px #BBB;
	text-align: center;
	line-height: 5.5vh;
}
.alltable{
	top: 2%;
	left: 2%;
	width: 77vw;
	text-align: center;
	background-color: #DDD;
	box-shadow:5px 5px 5px 5px #abb7d9;
	border-radius: 3px;
}
.alltable th{
	background-color: #1196F3;
	height: 35px;
	width: 100px;
	border-radius: 4px;
}
.alltable tr{
	background-color: #FFF;
	height: 25px;
}
/* 所有输入框 - 去边框 */
input{
	border: none;
	outline:none;
}
/**********************************************所有表格*********************************************/

/**********************************************监控图表*********************************************/
/* 监控面板 > 图表 CPU，内存，硬盘，网络 */
.view{
	width: 45%;
	height: 45%;
	position: relative;
	background-color: #FFF;
	box-shadow:5px 5px 5px 5px #a7b3db;
	border-radius: 4px;
}
/**********************************************监控图表*********************************************/

/**********************************************面板表格*********************************************/
/*#F90,#9C27B0,#1196F3*/
.addhost_form{
	font-size: 14px;
	top: 2%;
	left: 2%;
	width: 100%;
	height: 8%;
	border-radius: 4px;
	background-color: #EEE;
	box-shadow:5px 5px 5px 5px #a7b3db;
}
.form_input{
	height: 8%;
	width: 17%;
	padding: 0.5%;
	border-radius: 3px;
}
/* 设备管理 > 添加设备 : 添加按钮 */
.ok{
	height: 20%;
	width: 10%;
	border-radius: 5px;
	left: 66vw;
	top: 1vh;
	position: absolute;
	background-color: #0c64eb;
	box-shadow: 2px 2px 2px 2px #bbb;
	line-height: 3.5vh;
}
.ok:active{
	box-shadow:inset 1px 1px 1px 1px #000;
	background-color: #0848ab;
	font-size: 13.5px;
}
/**********************************************面板表格*********************************************/

/**********************************************悬浮表单*********************************************/
.floatWindows{
	height: 80%;
	width: 40%;
	left: 32%;
	top: -3%;
	background-color: #FFF;
	display: none;
	box-shadow: 3px 3px 3px 100vw #000000ba;
	opacity: 0.95;
	border-radius: 4px;
	padding-top: 5%;
	position: absolute;
}
.addWindows{
	height: 85%;
}
.addWindows input{
	height: 6%;
	width: 44%;
	margin-left: 3%;
	box-shadow: 1px 1px 1px 2px #999;
	border-radius: 4px;
	background-color: #DDD;
}
.floatWindowsBtn{
	width: 20%;
	height: 4vh;
	left: 54%;
	top: 100%;
	background-color: #DDD;
	position: absolute;
	border-radius: 2px;
	box-shadow: 1px 1px 1px 2px #888;
}
/**********************************************添加表单*********************************************/

/**********************************************系统设置*********************************************/
/*外围框架*/
.setup_package, .setup_about, .setup_clock, .setup_exit{
	width: 20%;
	height: 75%;
	border-radius: 3%;
	box-shadow: 4px 4px 4px 4px #071340;
}
/* 鼠标离开显示标题 */
.sysTitle{
	height: 100%;
	width: 100%;
	border-radius: 3%;
	background-image: linear-gradient(133deg,#2ca4ff,#FFF,#7176ff);
}
/*标题中的样式*/
.sysTitleTitle{
	writing-mode:tb-rl;
	top: 22vh;
	left: 8vw;
	background-image: none;
}
/* 鼠标进入显示内容 */
.sysBody{
	text-shadow: #888 2px 2px 3px;
	display: none;
	font-size: 14px;
	background-image: linear-gradient(225deg,#FFF,#FFF);
	height: 100%;
	width: 92%;
	top: -100%;
	border-radius: 3%;
	padding-left: 8%;
	color: #000;
}
/* 内容中标题 */
.sysBodyTitle{
	text-align: center;
	left:-5%;
}

/**********************************************系统设置*********************************************/
